<template>
  <div class="left">
    <el-card v-for="(item) in list" :key="item.id">
      <div class="leftcard">
        <div class="pic">
          <svg t="1697225483321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1575" width="128" height="128">
            <path
              d="M208.979592 1024h606.040816c115.461224 0 208.979592-93.518367 208.979592-208.979592V208.979592C1024 93.518367 930.481633 0 815.020408 0H208.979592C93.518367 0 0 93.518367 0 208.979592v606.040816c0 115.461224 93.518367 208.979592 208.979592 208.979592z"
              fill="#9A3FCE" p-id="1576"></path>
            <path
              d="M512 125.387755c196.231837 0 355.265306 159.033469 355.265306 355.265306 0 156.734694-101.459592 289.854694-242.416326 336.979592l4.284081-46.18449C744.280816 725.054694 825.469388 612.414694 825.469388 480.653061c0-173.139592-140.329796-313.469388-313.469388-313.469388S198.530612 307.513469 198.530612 480.653061c0 131.761633 81.188571 244.401633 196.336327 290.795102l4.284081 46.18449C258.194286 770.507755 156.734694 637.387755 156.734694 480.653061c0-196.231837 159.033469-355.265306 355.265306-355.265306z m0 125.387755c126.955102 0 229.877551 102.922449 229.877551 229.877551 0 80.248163-41.16898 150.987755-103.549388 192.052245l5.43347-57.887347A187.141224 187.141224 0 0 0 700.081633 480.653061c0-103.862857-84.218776-188.081633-188.081633-188.081632s-188.081633 84.218776-188.081633 188.081632c0 52.558367 21.524898 100.101224 56.32 134.164898l5.43347 57.887347C323.291429 631.640816 282.122449 560.901224 282.122449 480.653061c0-126.955102 102.922449-229.877551 229.877551-229.877551z m-83.591837 198.530612c0-46.18449 37.407347-83.591837 83.591837-83.591836s83.591837 37.407347 83.591837 83.591836-37.407347 83.591837-83.591837 83.591837-83.591837-37.407347-83.591837-83.591837z m83.591837 449.306123c-35.526531 0-65.201633-27.062857-68.545306-62.380408l-16.927347-180.558368A83.581388 83.581388 0 0 1 509.805714 564.244898h4.388572c49.319184 0 87.875918 42.318367 83.278367 91.428571l-16.927347 180.558368A68.879673 68.879673 0 0 1 512 898.612245z"
              fill="#FFFFFF" p-id="1577"></path>
          </svg>
        </div>

        <div class="leftbody">
          <div class="title" @click="goDetail(item.md_url)">{{ item.title }}</div>
          <div>
            <p>
              {{ item.abstract }}
            </p>
          </div>
          <div>
            <span>类别：{{ item.type }}</span>
            <span>更新日期:{{ item.update_dt }}</span>
            <span>留言个数：{{ item.leave_message_count }}</span>
          </div>
          <div>
            <el-tag class="mx-1" type="info" v-for="(subitem) in item.label" :key="subitem">{{ subitem }}</el-tag>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang='ts'>
import {reactive} from "vue"
let list = reactive([
  {
    id:1,
    title:"HBase过滤器介绍",
    abstract:"这样是不是相当于，把一篇介绍上海的文章的大纲划分出来了？当然，如果有需要，你可以继续往下划分，就是在h3标题下面可以再添加h4标题，h4下面 可以添加h5，一直可以添加到h6，但是很少有页面能用到h6。",
    type:"大数据",
    update_dt:"2023-10-14",
    leave_message_count: 100,
    label:["hbase","bigdata","优化"],
    md_url:"../mdfile/vue/vue3_01.md"
  },
  {
    id:2,
    title:"HBase过滤器介绍",
    abstract:"这样是不是相当于，把一篇介绍上海的文章的大纲划分出来了？当然，如果有需要，你可以继续往下划分，就是在h3标题下面可以再添加h4标题，h4下面 可以添加h5，一直可以添加到h6，但是很少有页面能用到h6。",
    type:"大数据",
    update_dt:"2023-10-14",
    leave_message_count: 100,
    label:["hbase","bigdata","优化"],
    md_url:"../mdfile/vue/vue3_01.md"
  },
  {
    id:3,
    title:"HBase过滤器介绍",
    abstract:"这样是不是相当于，把一篇介绍上海的文章的大纲划分出来了？当然，如果有需要，你可以继续往下划分，就是在h3标题下面可以再添加h4标题，h4下面 可以添加h5，一直可以添加到h6，但是很少有页面能用到h6。",
    type:"大数据",
    update_dt:"2023-10-14",
    leave_message_count: 100,
    label:["hbase","bigdata","优化"],
    md_url:"../mdfile/vue/vue3_01.md"
  },
  {
    id:4,
    title:"HBase过滤器介绍",
    abstract:"这样是不是相当于，把一篇介绍上海的文章的大纲划分出来了？当然，如果有需要，你可以继续往下划分，就是在h3标题下面可以再添加h4标题，h4下面 可以添加h5，一直可以添加到h6，但是很少有页面能用到h6。",
    type:"大数据",
    update_dt:"2023-10-14",
    leave_message_count: 100,
    label:["hbase","bigdata","优化"],
    md_url:"../mdfile/docker/docker_sum.md"
  },
  {
    id:5,
    title:"HBase过滤器介绍",
    abstract:"这样是不是相当于，把一篇介绍上海的文章的大纲划分出来了？当然，如果有需要，你可以继续往下划分，就是在h3标题下面可以再添加h4标题，h4下面 可以添加h5，一直可以添加到h6，但是很少有页面能用到h6。",
    type:"大数据",
    update_dt:"2023-10-14",
    leave_message_count: 100,
    label:["hbase","bigdata","优化"],
    md_url:"../mdfile/docker/docker_note.md"
  },
])

const emit = defineEmits(["changeShowDetail"])
const goDetail = (md_url:string)=> {
  console.log("emit",md_url)
  emit("changeShowDetail",md_url)
}


</script>
<style scoped lang="scss">
.left {

  margin-right: 20px;
  flex: 0.7;
  display: flex;
  flex-direction: column;

  .leftcard {
    display: flex;
    flex-direction: row;


    .pic {
      width: 400px;
    }

    .leftbody {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 14px;

      div {
        padding: 0px 10px;
        line-height: 25px;
        margin-bottom: 10px;
      }

      .title{
        cursor: pointer;
      }

    }

    .leftbody div:nth-child(1) {
      border: 1px solid #f7f7f7;
      background-color: #f7f7f7;
      line-height: 40px;
      font-size: 16px;
      font-weight: 900;
    }

    .leftbody div:nth-child(3) {
      display: flex;

      span {
        flex: 1;
        margin-right: 10px;
      }
    }

    .leftbody div:nth-child(4) {
      display: flex;

      .el-tag {
        margin-right: 10px;
      }

      .el-tag:hover {
        cursor: pointer;
      }

    }

  }

  .el-card {
    margin-bottom: 10px;

    .el-card__body {
      display: flex;
      flex-direction: row;
    }
  }
}
</style>